<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>方形</title>
</head>
<body>
<canvas width="200" height="200" id="canvas1"></canvas>
<canvas width="200" height="200" id="canvas2"></canvas>
</body>
<script>
  let canvas1 = document.getElementById('canvas1');
  let canvas2 = document.getElementById('canvas2');
  if (canvas1.getContext){
    let ctx1 = canvas1.getContext('2d');

    ctx1.beginPath();
    // 圆心坐标x | y
    ctx1.arc(75, 75, 50, 0, Math.PI*2, true ); // 绘制

    ctx1.moveTo(110,75);
    ctx1.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)

    ctx1.moveTo(65,65);
    ctx1.arc(60, 65, 5, 0, Math.PI*2, true);  // 左眼

    ctx1.moveTo(95,65);
    ctx1.arc(90, 65, 5, 0, Math.PI*2, true);  // 右眼
    ctx1.stroke();
  }
  if (canvas2.getContext){
    let ctx2 = canvas2.getContext('2d');

    for(let i=0;i<4;i++){
      for(let j=0;j<3;j++){
        ctx2.beginPath();
        let x = 25+j*50; // x 坐标值
        let y = 25+i*50; // y 坐标值
        let radius = 20; // 圆弧半径
        let startAngle = 0; // 开始点
        let endAngle = Math.PI+(Math.PI*j)/2; // 结束点
        let anticlockwise = i % 2 === 0; // 顺时针或逆时针

        ctx2.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i>1){
          ctx2.fill();
        } else {
          ctx2.stroke();
        }
      }
    }
  }


</script>
</html>